<template>
	<view class="foot">
		<view class="content">
			<view class="" @click="tabbarJump(0)">
				<view class="">
					<image src="@/static/images/tabbar/home_.svg" class="icon" v-if="tabbarIndex == 0">
					</image>
					<image src="@/static/images/tabbar/home.svg" class="icon" v-else></image>
				</view>
				<view class="text f18" :class="tabbarIndex == 0?'active':''">首页</view>
			</view>
			<view class="" @click="tabbarJump(1)">
				<view class="">
					<image src="@/static/images/tabbar/reserve_.svg" class="icon" v-if="tabbarIndex == 1">
					</image>
					<image src="@/static/images/tabbar/reserve.svg" class="icon" v-else></image>
				</view>
				<view class="text f18" :class="tabbarIndex == 1?'active':''">订餐</view>
			</view>
			<view class="" @click="tabbarJump(2)">
				<view class="">
					<image src="@/static/images/tabbar/order_.svg" class="icon" v-if="tabbarIndex == 2">
					</image>
					<image src="@/static/images/tabbar/order.svg" class="icon" v-else></image>
				</view>
				<view class="text f18" :class="tabbarIndex == 2?'active':''">订单</view>
			</view>
			<view class="" @click="tabbarJump(3)">
				<view class="">
					<image src="@/static/images/tabbar/mine_.svg" class="icon" v-if="tabbarIndex == 3">
					</image>
					<image src="@/static/images/tabbar/mine.svg" class="icon" v-else></image>
				</view>
				<view class="text f18" :class="tabbarIndex == 3?'active':''">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isInTimeRange
	} from '@/utils/utils.js'
	// import {
	// 	mapState
	// } from 'vuex';
	export default {
		props: {
			tabbarIndex: {
				type: String,
				default: 0
			},
		},
		data() {
			return {}
		},
		computed: {},
		mounted() {
			this.$nextTick(() => {})

		},
		methods: {
			tabbarJump(index) {
				// 获取周六当前时间
				// 判断当前时间是否属于每周二12:00 到周五12:00
				if(index==1){
					if (!isInTimeRange()) {
						this.$modal.msg("抱歉，当前订餐时间未开放")
						return
					}
				}
				
				if (index == this.tabbarIndex) {
					return;
				}
				switch (index) {
					case 0:
						uni.reLaunch({
							url: "/pages/index"
						})
						break;
					case 1:
						uni.reLaunch({
							url: "/pages/reserve/reserve"
						})
						break;
					case 2:
						uni.reLaunch({
							url: "/pages/order/order"
						})
						break;
					case 3:
						uni.reLaunch({
							url: "/pages/mine/index"
						})
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	.foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9;
		// height: 160rpx;
		background-color: #FFFFFF;
		color: #323232;
		padding-top: 8rpx;
		padding-bottom: 57rpx;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);

		.content {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.icon {
			// width: 60rpx;
			// height: 60rpx;
			width: 70rpx;
			height: 70rpx;
		}

		.text {
			text-align: center;
			// color: #323232;
			font-size: 24rpx;
		}
	}

	.active {
		color: #0EB275;
	}
</style>